<!DOCTYPE html>
<html style="width: 100%;height:100%;">
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="./src/js/jquery.min.js"></script>
    <script src="./src/js/echarts.min.js"></script>
    <script src="./src/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./src/css/bootstrap.min.css">
    <title>money</title>
</head>
    <body style="width: 80%;height:100%;margin:80px;">
    <h1>监听系统</h1>
    <hr />
          <div class="form-group">
            <label><input id="Fruit" type="radio" value="sh" />上</label> 
            <label><input id="Fruit" type="radio" value="sz" />深</label> 
		  </div>
		  <div class="form-group">
		    <label for="exampleInputName2">号</label>
		    <input type="text" class="form-control" id="hao">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputEmail2">监听值</label>
		    <input type="text" class="form-control" id="value">
          </div>
        <button class="btn btn-primary" onclick="onl()">监听</button>
        <h3 id="hao1" style="margin-top:20px;"></h3>
        <h3 id="value1" style="margin-top:20px;"></h3>
        <h3 id="value2" style="margin-top:20px;display:none"></h3>
        <hr />
        <h2 id="mo" style="margin-top:30px;"></h2>
        <h3 id="value6"></h3>
        <h2 id="content" style="margin-top:30px;"></h2>
        <hr />
        <h3 id="value3" style="margin-top:20px;display:none"></h3>
        <div id="super">

        </div>
    </body>
    <script>

        function onl(){

            var hao = $("#hao").val();

            var value = $("#value").val();

            var first = $("input[id='Fruit']:checked").val();

            $("#value4").html("");

            $("#hao1").html("号:"+first+hao);

            $("#value1").html("监听值:"+value);

            $("#value2").html(value);

            setInterval(function(){

                $.ajax({
                //请求方式
                type : "POST",
                //请求地址
                url : "lin.php",
                //数据，json字符串
                data :{hao:hao,value:value,rd:first},
                //请求成功
                success : function(result) {

                    var red = parseInt(Math.random()*257).toString(16);
                    var blue = parseInt(Math.random()*257).toString(16);
                    var green= parseInt(Math.random()*257).toString(16);

                    var color = '#'+red+blue+green;

                    $("#mo").html("开始监听......");

                    $("#value6").html(nowTime()+":");

                    $("#content").html(result);

                    var value2 = $("#value2").html();

                    if(result > value2){

                        $("title").html(result+"---warning！！！！！！");

                        $("#value3").html("NICE！！！！！！");

                        $("#super").prepend("<h3>"+result+":"+nowTime()+"</h3>");

                    }

                    $("#content").css("color",color);
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });


        }, 2000);
    }
    function nowTime(){

        var nowDate = new Date();
        var year = nowDate.getFullYear();
        var month = nowDate.getMonth()+1;
        month = month>9 ? month : "0" + month; 
        var date = nowDate.getDate();
        date = date>9 ? date : "0" + date;
        var hour = nowDate.getHours();
        hour = hour>9 ? hour : "0" + hour;
        var miunte = nowDate.getMinutes();
        miunte = miunte>9 ? miunte : "0" + miunte;
        var second = nowDate.getSeconds();
        second = second>9 ? second : "0" + second;
        
        return year+"年"+month+"月"+date+"日"+hour+"时"+miunte+"分"+second+"秒";
    }
    </script>
</html>
